<template>
	<view class="shop-list">
		<view class="shop-title f-color">
			<view class="shop-item" v-for="(item,index) in ShopList.data" :key='index' @tap="changeTop(index)">
				<view :class=" ShopList.textIndex == index ? 'f-active-color' : '' ">{{item.name}}</view>
				<view class="shop-icon">
					<view class="iconfont up" :class=" item.status ===1 ? 'f-active-color':''">&#xe64a;</view>
					<view class="iconfont down" :class=" item.status ===2 ? 'f-active-color':''">&#xe649;</view>
				</view>
			</view>
			
		
		</view>
		<newline/>
		<ShopList :dataList='dataList'></ShopList>
		
	</view>

</template>


<script>
	import $http from "@/common/api/request.js"
	import newline from "@/component/line.vue"
	import ShopList from "../shopList.vue"
	
	export default{
		props:{
			keyText:String
		},
		data(){
			return{
				dataList:[],
				ShopList:{
					textIndex:0,
					data:[
						{name:'价格',status:1,key:'pprice'},
						{name:'折扣',status:0,key:'discount'},
						{name:'品牌',status:0}
					]
				}
			}
		},
		
			
	     mounted() {
	     	this.getData()
	     },
		 
		
		components:{
			newline,
			ShopList
		},
		
	    computed:{
			orderby(){
				// 拿到对象
				let obj =this.ShopList.data[this.ShopList.textIndex];
				let val =obj.status ===1 ?'desc':'asc'
				return{
					[obj.key]:val
				}
			  }
		},
		
		
		methods:{
			getData(){
				$http.request({
					url: "/goods/search",
					data:{
						name:this.keyText,
						...this.orderby
					}
				}).then((res) => {
					this.dataList=res;
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			},
			
			changeTop(index){
				this.getData()
				// 索引值
				let inx=this.ShopList.textIndex;
				
				// 获得具体对象
				let item=this.ShopList.data[inx];
				console.log(item)
				
				// 进行判断
				if( inx === index){
				    return item.status =item.status ===1 ? 2:1;
				}
				
				let newitem =this.ShopList.data[index];
				
				item.status=0;
				
				this.ShopList.textIndex =index;
				
				newitem.status=1;
			}
		}
	}
	
</script>

<style scoped>
	.shop-title{
		display: flex;
	}
	.shop-item{
		display: flex;
		flex:1;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}
	
	.shop-icon{
	 position: relative;
	 margin-left:10rpx;
	}
	
	
	.iconfont{
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}
	
	.up{
		top:-20rpx;
	}
	.down{
		top:-8rpx
	}
	
</style>